<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>数据处理</title>
	<!-- 主库 -->
	<script src="../dist/echarts.js"></script>
	<!-- 随便一个样式 -->
	<script src="../theme/infographic.js"></script>
	<style type="text/css" media="screen">
	/*浮动图表*/
		#main,#main2{
			float: left;
		}
	/*清除浮动*/
		.clear_float{
			clear:both;
		}
	</style>
</head>
<body>
<!-- 给个容器 -->
<h1>使用数据集的方法处理动态数据</h1>
<h2>1.普通数组方式</h2>
<div id="main" style="width: 600px;height:400px;"></div>
<div>
<pre>
option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
            ['产品', '2015', '2016', '2017'],
            ['抹茶拿铁', 43.3, 85.8, 93.7],
            ['奶茶', 83.1, 73.4, 55.1],
            ['芝士可可', 86.4, 65.2, 82.5],
            ['核桃布朗尼', 72.4, 53.9, 39.1]
        ]
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}
</pre>
</div>
<div class="clear_float"></div><hr/>
<h2>2.使用对象数组方式</h2>
<div id="main2" style="width: 600px;height:400px;"></div>
<div><pre>
option2 = {
    legend: {},
    tooltip: {},
    dataset: {
        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
        dimensions: ['产品', '2015', '2016', '2017'],
        source: [
            {产品: '抹茶拿铁', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {产品: '奶茶', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {产品: '芝士可可', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {产品: '核桃布朗尼', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}
</pre></div>
<div class="clear_float"></div><hr/>
<h2>3.数据图形映射</h2>




<script type="text/javascript">
//001.初始化
var myData = echarts.init(document.getElementById('main'),'infographic');
var myData2 = echarts.init(document.getElementById('main2'),'dark');
//002.配置选项和数据
var option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份数据。
        source: [
            ['产品', '2015', '2016', '2017'],
            ['抹茶拿铁', 43.3, 85.8, 93.7],
            ['奶茶', 83.1, 73.4, 55.1],
            ['芝士可可', 86.4, 65.2, 82.5],
            ['核桃布朗尼', 72.4, 53.9, 39.1]
        ]
    },
    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
    xAxis: {type: 'category'},
    // 声明一个 Y 轴，数值轴。
    yAxis: {},
    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};
var option2 = {
    legend: {},
    tooltip: {},
    dataset: {
        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。
        dimensions: ['产品', '2015', '2016', '2017'],
        source: [
            {产品: '抹茶拿铁', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {产品: '奶茶', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {产品: '芝士可可', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {产品: '核桃布朗尼', '2015': 72.4, '2016': 53.9, '2017': 39.1},
            {产品: '完达山', '2015': 63.2, '2016': 19.8, '2017': 30.1},
            {产品: '加多宝', '2015': 22.4, '2016': 88.9, '2017': 36.1}
        ]
    },
    xAxis: {type: 'category'},
    dataZoom: [
      {
    	// 这个dataZoom组件用来缩放某个轴，默认控制x轴
    	type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件，只能拖动轴，改成inside即可使用鼠标滚轮
    	xAxisIndex: 0,
    	start: 10,      // 左边在 10% 的位置。
    	end: 60         // 右边在 60% 的位置
      },{
      	type: 'inside', //可以指定很多个
      	xAxisIndex: 0,
      	start: 10,
      	end: 60
      },{
        type: 'slider',
        yAxisIndex: 0,
        start: 10,
        end: 60
      },{
        type: 'inside',
        yAxisIndex: 0,
        start: 10,
        end: 60
      }
    ],
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};
myData.setOption(option);	//渲染
myData2.setOption(option2);
</script>
</body>
</html>